import React, { useState, useEffect } from 'react';
import { useSearchParams, useNavigate } from "react-router-dom";
import { UnorderedListOutline, RightOutline } from 'antd-mobile-icons'
// 
import './BookDetail.scss'
import DetailCard from '../../components/DetailCard/DetailCard';
import DetailComment from '../../components/DetailComment/DetailComment';
import SearchNav from '../../components/SearchNav/SearchNav';
function BookDetail() {
   // 获取id    
   const [searchParams, setSearchParams] = useSearchParams();
   const [detail, setDetail] = useState(null);
   const [lastest, setLastest] = useState(null);
   const [comment, setComment] = useState(null);
   //   
   let id = searchParams.get('id');
   let title = searchParams.get('title');

   let navigate = useNavigate();

   useEffect(() => {
      // console.log(id, title);
      // 书籍信息
      React.axios
         .get("book/getsub.json", {
            params: { id, title },
         })
         .then(function (res) {
            setDetail(res.feed.entry);
            // console.log('书籍详情---', res.feed);
         })
         .catch(function (error) {
            console.log(error);
         });
      // 最新章节
      React.axios
         .get("book/simpleInfo.json", {
            params: { id },
         })
         .then(function (res) {
            setLastest(res.item);
            console.log('最新章节', res.item);
         })
         .catch(function (error) {
            console.log(error);
         });
      // 评论
      React.axios.get('comment/getComments.json', {
         params: {
            bookId: id,
            page: 1
         },
      }).then(res => {
         // console.log("书籍评论---->", res);
         setComment(res.all)
      }).catch(err => {
         console.log(err);
      });
   }, [id])

   return detail && lastest ? (
      <div className='book_detail'>
         {/* 头部 */}
         <SearchNav/>
         {/*  */}
         <div className='detail_cont'>
            <DetailCard item={detail} />
         </div>
         {/* 最新章节 */}
         <div className='detail_page'>
            <UnorderedListOutline fontSize={22} color="#868481" />
            <span className='newPage' onClick={() => navigate("/book/chapter?id=" + id)}>{lastest.latestArticleTitle}</span>
            <span className="state">连载中</span>
            <RightOutline color='#868481' />
         </div>
         <p className='mask'></p>
         {/* 评论 */}
         <div>
            <DetailComment coms= {comment}></DetailComment>
         </div>
      </div>
   ) : null;
}

export default BookDetail;